<template>
  <div class="d-flex align-items-center">
    <div
      id="header"
      class="d-flex justify-content-between w-100 d-flex align-items-center"
    >
      <div class="name-box">
        <div class="name font-weight-bold h3">Qilimazhuoluo</div>
      </div>
      <div class="d-flex">
        <ul class="d-flex list-unstyled m-0 mr-3">
          <li class="mx-2">
            <router-link to="/">首页</router-link>
          </li>
          <li class="mx-2">
            <router-link to="/">标签</router-link>
          </li>
          <li class="mx-2">
            <router-link to="/">归档</router-link>
          </li>
          <li class="mx-2">
            <router-link to="/upload">写笔记</router-link>
          </li>
        </ul>
        <ul v-if="isLogin" class="d-flex list-unstyled m-0 mr-3">
          <li class="mx-2">
            <span>{{ uname }}</span>
          </li>
          <li class="mx-2">
            <button @click="quit">退出</button>
          </li>
        </ul>
        <ul v-else class="d-flex list-unstyled m-0 mr-3">
          <li class="mx-2">
            <router-link to="/login">登录</router-link>
          </li>
          <li class="mx-2">
            <router-link to="/reg">注册</router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import store from "@/store/index";
export default {
  data() {
    return {
      // isLogin: this.$store.state.isLogin,
      // uname: this.$store.state.uname,
    };
  },
  methods: {
    quit() {
      localStorage.setItem("isLogin", 0);
      localStorage.removeItem("uname", this.uname);
      localStorage.removeItem("upwd", this.upwd);
      sessionStorage.setItem("isLogin", 0);
      sessionStorage.removeItem("uname", this.uname);
      sessionStorage.removeItem("upwd", this.upwd);
      this.tip = true;
      this.$store.state.isLogin = false;
      this.isLogin = false;
    },
    refresh() {
      this.$store.refresh();
    },
  },
  mounted() {
    this.$store.commit("refresh");
  },
  computed: {
    isLogin() {
      return this.$store.state.isLogin;
    },
    uname() {
      return this.$store.state.uname;
    },
  },
};
</script>

<style>
#header {
  max-width: 1000px;
  margin: 0 auto;
  background-color: #f7f1f1;
  height: 100px;
}
.name-box {
  border-top: 3px solid;
  border-bottom: 3px solid;
  margin-left: 20px;
}
.name {
  margin-left: -20px;
  margin-right: -20px;
}
</style>
